<template>

    <div>
           <div class="comments">
<!--            compser="true"-->
            <div ><!--评论文本域-->
                <textarea class="myComment" v-model="query"  placeholder="发布你的评论"
                    name="content"
                    style="height: 24px;" onpropertychange="this.style.height=this.scrollHeight + 'px'"
                    oninput="this.style.height=this.scrollHeight + 'px'" ></textarea>
            </div>
<!--            发布评论按钮-->
            <div class="issues">
                <button class="issue" @click="issueCom()">评论</button>
            </div>
        </div>
<!--        下面是评论区，循环显示-->
        <div class="peopleComment clearfix" v-for="itme in commentList" :key="itme.id">
            <div class="boxComImg">
                <img class="comImg" :src="itme.userAvatar"/>
            </div>
            <div class="comName">
                <span class="comContent">{{itme.userName}}</span>
                <span>:</span>
                <span>{{itme.content}}</span>
            </div>
            <div class="comTime">
                <span>{{itme.createTime | timeFormater}}</span>
            </div>
        </div>
    </div>        

</template>

<script>
import {postRequest,getRequest} from '../utils/api.js'
export default {
    name: 'Comment',

    data() {
        return {
                    
        query:"",//评论框

        // bl:false,

            //评论对象数组
        commentList:[],
        };
    },
    props:['replyId'],//传入回答的id
    mounted() {
        getRequest('/qa/comment/searchComments/'+this.replyId).then((result) => {
            this.commentList = result;
        }).catch((err) => {
            
        });
    },

    methods: {
        issueCom(){

            if(this.query == ""){
                this.$message.error({
                    message:'请输入评论内容'
                });
                return;
            }
            console.log("点击了评论按钮");
            postRequest('/qa/comment/insertComment',{
                replyId:this.replyId,//回答id
                content:this.query,//评论内容
            }).then((result) => {
                if(result){
                    this.query ="";
                    this.commentList.unshift(result);
                }
            }).catch((err) => {
                
            });
        }
    },
};
</script>

<style  scoped>

/* 将父容器撑开 */
.clearfix:after { 
    visibility: hidden; 
    display: block; 
    content: "."; 
    clear: both; 
    height: 0; }

.agree,#mytopic{
    text-decoration:none;
    color: #000;
}
.img{
    width: 50px;
    height:50px;
    border-radius: 30px;
}
.main{
    margin-top: 20px;
    margin-bottom: 20px;
}
.headImg{
    display:inline-block;
    padding-right:10px;
}
.name{
    display:inline-block;
    position:relative;
    top: -25px;
    left: -5px;
    font-weight: bold;
}   
.content,.imgsD,.time,.comments{
    padding-left:60px ;
    padding-right:10px;
}
.time{
    position:relative;
    top:-20px;
    font-size: 14px;
}
.imgs{
    width: 170px;
    height: 160px;
    margin-right: 5px;
    border-radius: 10px;
}
.bot{
    text-align: center;
    margin-top: 12px;
    margin-bottom: 20px;
}
.agree{
    color:#eb7340;
}
.comments{
    margin-top: 20px;
    margin-bottom: 20px;
}
.myComment{
    width: 510px;
    min-height: 40px;
    max-height: 80px;
    resize: none;
    outline:none
}
.issues{
    /* text-align: right;
    margin-right: 12px;
    margin-top: 10px; */
}
.issue{
    width: 60px;
    height: 35px;
    background-color: #eb7350;
    border: none;
}
.issue:focus{
    cursor: pointer;
}
.imgs:focus{
    cursor: pointer;
}
.comImg{
    width: 34px;
    height: 34px;
    border-radius: 20px;
}
.boxComImg{
    float:left;
    
}
.comName{
    font-size: 15px;
    margin-left: 45px;
}
.comContent{
     color: #fa6c01;
     font-size: 15px;
   
}
.comTime{
    font-size:13px;
    margin-left: 45px;
    color: #939393;
}
.peopleComment{
    margin-bottom: 20px;
}
   
</style>